@import '../assets/css/function.scss';

/*标题样式表*/

/*
带左边颜色条杠的标题样式，样子 |标题
*/
@mixin caption-left-resize ($height: 80, $fontSize: 30, $fontColor: #999, $background: #72a5ef) {
  position: relative;
  padding: rem(22) 0 rem(22) rem(20);
  font-size: rem($fontSize);
  color: $fontColor;
  &:before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    margin: auto 0;
    width: rem(5);
    height: rem($fontSize);
    background: $background;
  }
}
.caption-left-cursor{
  @include caption-left-resize()
}

/*
两边横线的标题样式  样子：-- 标题 --
*/
@mixin caption-cross-resize ($width: 25%, $height: 1px, $background: #d1d1d1) {
  position: relative;
  &:before{
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto 0;
    width: $width;
    height: $height;
    background: $background;
  }
  &:after{
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto 0;
    width: $width;
    height: $height;
    background: $background;
  }
}
.caption-cross{
  @include caption-cross-resize()
}

/*
两边点的标题样式  样子：· 标题 ·
*/
@mixin caption-pointer-resize ($width: 6px, $height: 6px, $background: #d1d1d1) {
  position: relative;
  &:before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    margin: auto 0;
    width: $width;
    height: $height;
    border-radius: 50%;
    background: $background;
  }
  &:after{
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto 0;
    width: $width;
    height: $height;
    border-radius: 50%;
    background: $background;
  }
}
.caption-pointer{
  @include caption-pointer-resize()
}